<template>
	<view class="container">
		<!-- User Profile Header -->
		<view class="profile-header">
			<view class="user-info">
				<image src="/static/avatar.jpg" class="avatar" @click="changeAvatar"></image>
				<view class="info-block">
					<text class="username">李明</text>
					<text class="user-id">ID: 10086</text>
				</view>
			</view>
			<view class="edit-profile" @click="editProfile">
				<text class="edit-text">编辑资料</text>
				<text class="icon-right">></text>
			</view>
		</view>

		<!-- User Stats -->
		<view class="user-stats">
			<view class="stat-item" @click="navigateTo('/pages/profile/learning')">
				<text class="stat-number">12</text>
				<text class="stat-label">在学课程</text>
			</view>
			<view class="stat-item" @click="navigateTo('/pages/profile/collection')">
				<text class="stat-number">24</text>
				<text class="stat-label">我的收藏</text>
			</view>
			<view class="stat-item" @click="navigateTo('/pages/profile/download')">
				<text class="stat-number">8</text>
				<text class="stat-label">已下载</text>
			</view>
		</view>

		<!-- Learning Progress -->
		<view class="progress-section">
			<view class="section-header">
				<text class="section-title">最近学习</text>
				<text class="section-more" @click="navigateTo('/pages/profile/learning')">查看全部</text>
			</view>

			<view class="course-progress" v-for="(course, index) in recentCourses" :key="index"
				@click="continueLearning(course)">
				<image :src="course.image" mode="aspectFill" class="course-image"></image>
				<view class="course-info">
					<text class="course-name">{{ course.name }}</text>
					<view class="progress-bar">
						<view class="progress-inner" :style="{ width: course.progress + '%' }"></view>
					</view>
					<view class="progress-info">
						<text class="progress-text">已学习 {{ course.progress }}%</text>
						<text class="last-time">{{ course.lastTime }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- Menu List -->
		<view class="menu-list">
			<view class="menu-group">
				<view class="menu-item" @click="navigateTo('/pages/profile/certificate')">
					<view class="menu-icon icon-certificate"></view>
					<text class="menu-text">我的证书</text>
					<text class="menu-arrow">></text>
				</view>
				<view class="menu-item" @click="navigateTo('/pages/profile/collection')">
					<view class="menu-icon icon-favorite"></view>
					<text class="menu-text">我的收藏</text>
					<text class="menu-arrow">></text>
				</view>
				<view class="menu-item" @click="navigateTo('/pages/profile/history')">
					<view class="menu-icon icon-history"></view>
					<text class="menu-text">浏览历史</text>
					<text class="menu-arrow">></text>
				</view>
				<view class="menu-item" @click="navigateTo('/pages/profile/download')">
					<view class="menu-icon icon-download"></view>
					<text class="menu-text">离线缓存</text>
					<text class="menu-arrow">></text>
				</view>
			</view>

			<view class="menu-group">
				<view class="menu-item" @click="navigateTo('/pages/profile/feedback')">
					<view class="menu-icon icon-feedback"></view>
					<text class="menu-text">意见反馈</text>
					<text class="menu-arrow">></text>
				</view>
				<view class="menu-item" @click="navigateTo('/pages/profile/settings')">
					<view class="menu-icon icon-settings"></view>
					<text class="menu-text">设置</text>
					<text class="menu-arrow">></text>
				</view>
				<view class="menu-item" @click="navigateTo('/pages/profile/about')">
					<view class="menu-icon icon-about"></view>
					<text class="menu-text">关于我们</text>
					<text class="menu-arrow">></text>
				</view>
			</view>
		</view>

		<!-- Version Info -->
		<view class="version-info">
			<text class="version-text">智慧教育 v1.0.0</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	// 状态变量
	const recentCourses = ref([{
			id: 1,
			name: '人工智能基础',
			image: '/static/course1.jpg',
			progress: 45,
			lastTime: '昨天 19:30'
		},
		{
			id: 2,
			name: '高等数学入门',
			image: '/static/course2.jpg',
			progress: 28,
			lastTime: '3天前'
		},
		{
			id: 3,
			name: '英语口语进阶',
			image: '/static/course3.jpg',
			progress: 67,
			lastTime: '今天 10:15'
		}
	]);

	// 方法
	function changeAvatar() {
		uni.showActionSheet({
			itemList: ['拍照', '从相册选择'],
			success: (res) => {
				if (res.tapIndex === 0) {
					// 拍照
					uni.chooseImage({
						count: 1,
						sourceType: ['camera'],
						success: (res) => {
							// 实际应用中，这里应该上传头像到服务器
							uni.showToast({
								title: '头像已更新',
								icon: 'success'
							});
						}
					});
				} else if (res.tapIndex === 1) {
					// 从相册选择
					uni.chooseImage({
						count: 1,
						sourceType: ['album'],
						success: (res) => {
							// 实际应用中，这里应该上传头像到服务器
							uni.showToast({
								title: '头像已更新',
								icon: 'success'
							});
						}
					});
				}
			}
		});
	}

	function editProfile() {
		uni.navigateTo({
			url: '/pages/profile/edit'
		});
	}

	function navigateTo(url) {
		uni.navigateTo({
			url: url
		});
	}

	function continueLearning(course) {
		uni.navigateTo({
			url: `/pages/course/course?id=${course.id}`
		});
	}
</script>

<style>
	.container {
		padding-bottom: 30rpx;
		background-color: #f5f5f5;
	}

	/* Profile Header Styles */
	.profile-header {
		background-color: #007AFF;
		padding: 40rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #fff;
	}

	.user-info {
		display: flex;
		align-items: center;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		border: 4rpx solid #fff;
		margin-right: 20rpx;
	}

	.info-block {
		display: flex;
		flex-direction: column;
	}

	.username {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 5rpx;
	}

	.user-id {
		font-size: 24rpx;
		opacity: 0.8;
	}

	.edit-profile {
		display: flex;
		align-items: center;
		background-color: rgba(255, 255, 255, 0.2);
		padding: 8rpx 20rpx;
		border-radius: 30rpx;
	}

	.edit-text {
		font-size: 24rpx;
		margin-right: 5rpx;
	}

	.icon-right {
		font-size: 24rpx;
	}

	/* User Stats Styles */
	.user-stats {
		display: flex;
		background-color: #fff;
		padding: 30rpx 0;
		margin-bottom: 20rpx;
	}

	.stat-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-right: 1rpx solid #f0f0f0;
	}

	.stat-item:last-child {
		border-right: none;
	}

	.stat-number {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}

	.stat-label {
		font-size: 26rpx;
		color: #999;
	}

	/* Progress Section Styles */
	.progress-section {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.section-more {
		font-size: 26rpx;
		color: #999;
	}

	.course-progress {
		display: flex;
		margin-bottom: 30rpx;
	}

	.course-progress:last-child {
		margin-bottom: 0;
	}

	.course-image {
		width: 140rpx;
		height: 100rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.course-info {
		flex: 1;
	}

	.course-name {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 15rpx;
	}

	.progress-bar {
		height: 10rpx;
		background-color: #f0f0f0;
		border-radius: 5rpx;
		margin-bottom: 10rpx;
	}

	.progress-inner {
		height: 100%;
		background-color: #007AFF;
		border-radius: 5rpx;
	}

	.progress-info {
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		color: #999;
	}

	/* Menu List Styles */
	.menu-list {
		margin-bottom: 20rpx;
	}

	.menu-group {
		background-color: #fff;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}

	.menu-item {
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.menu-item:last-child {
		border-bottom: none;
	}

	.menu-icon {
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #007AFF;
		font-size: 36rpx;
	}

	.menu-text {
		flex: 1;
		font-size: 30rpx;
		color: #333;
	}

	.menu-arrow {
		font-size: 30rpx;
		color: #ccc;
	}

	/* Icon Placeholders - In real app, use actual icon fonts or images */
	.icon-certificate,
	.icon-favorite,
	.icon-history,
	.icon-download,
	.icon-feedback,
	.icon-settings,
	.icon-about {
		width: 40rpx;
		height: 40rpx;
		background-color: #e6f2ff;
		border-radius: 50%;
	}

	/* Version Info Styles */
	.version-info {
		text-align: center;
		padding: 30rpx 0;
	}

	.version-text {
		font-size: 24rpx;
		color: #999;
	}
</style>